<template>
  <div class="workbench page-container">
    <!-- Tab页签 -->
    <div class="tab-container">
      <div 
        class="tab-item"
        :class="{ 'active': activeTab === 'agent' }"
        @click="showCreateForm"
      >
        <a-icon type="robot" />
        <span>创建智能体</span>
      </div>
      <div 
        class="tab-item"
        :class="{ 'active': activeTab === 'workflow' }"
        @click="handleWorkflow"
      >
        <a-icon type="apartment" />
        <span>接入工作流</span>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="tab-content">
      <!-- 创建智能体表单 -->
      <transition name="fade">
      <div 
        class="create-form" 
        v-show="activeTab === 'agent'"
      >
        <a-form :form="form" layout="vertical">
          <h3 class="form-title">创建智能体配置</h3>
          <!-- 智能体ID -->
          <a-form-item label="智能体ID">
            <div class="form-item-header">
              <span>智能体ID</span>
              <a class="help-link" @click="showHelp('agentId')">
                <a-icon type="question-circle" /> 如何获取？
              </a>
            </div>
            <a-input
              v-decorator="[
                'agentId',
                {
                  rules: [{ required: true, message: '请输入智能体ID' }]
                }
              ]"
              placeholder="请输入智能体ID"
            />
          </a-form-item>

          <!-- 认证方式选择 -->
          <a-form-item label="认证方式">
            <a-select
              v-decorator="[
                'authType',
                {
                  rules: [{ required: true, message: '请选择认证方式' }]
                }
              ]"
              placeholder="请选择认证方式"
              @change="handleAuthTypeChange"
            >
              <a-select-option value="token">个人访问令牌</a-select-option>
              <a-select-option value="oauth">OAuth应用</a-select-option>
            </a-select>
          </a-form-item>

          <!-- 个人访问令牌输入 -->
          <template v-if="form.getFieldValue('authType') === 'token'">
            <a-form-item label="个人访问令牌">
              <div class="form-item-header">
                <span>个人访问令牌</span>
                <a class="help-link" @click="showHelp('token')">
                  <a-icon type="question-circle" /> 如何获取？
                </a>
              </div>
              <a-input-password
                v-decorator="[
                  'accessToken',
                  {
                    rules: [{ required: true, message: '请输入访问令牌' }]
                  }
                ]"
                placeholder="请输入个人访问令牌"
              />
            </a-form-item>
          </template>

          <!-- OAuth应用配置 -->
          <template v-if="form.getFieldValue('authType') === 'oauth'">
            <a-form-item label="应用ID">
              <div class="form-item-header">
                <span>应用ID</span>
                <a class="help-link" @click="showHelp('oauth')">
                  <a-icon type="question-circle" /> 配置指南
                </a>
              </div>
              <a-input
                v-decorator="[
                  'appId',
                  {
                    rules: [{ required: true, message: '请输入应用ID' }]
                  }
                ]"
                placeholder="请输入应用ID"
              />
            </a-form-item>

            <a-form-item label="公钥">
              <a-input
                v-decorator="[
                  'publicKey',
                  {
                    rules: [{ required: true, message: '请输入公钥' }]
                  }
                ]"
                placeholder="请输入公钥"
              />
            </a-form-item>

            <a-form-item label="私钥文件">
              <a-upload
                v-decorator="[
                  'privateKey',
                  {
                    rules: [{ required: true, message: '请上传私钥文件' }]
                  }
                ]"
                :beforeUpload="beforeUpload"
                :showUploadList="true"
              >
                <a-button>
                  <a-icon type="upload" /> 上传私钥文件
                </a-button>
              </a-upload>
            </a-form-item>
          </template>

          <!-- 保存按钮 -->
          <div class="form-actions">
            <a-button type="primary" @click="handleSubmit">保存</a-button>
          </div>
        </a-form>
      </div>
      </transition>

      <!-- 工作流表单 -->
      <transition name="fade">
      <div 
        class="create-form" 
        v-show="activeTab === 'workflow'"
      >
        <a-form :form="workflowForm" layout="vertical">
          <h3 class="form-title">工作流接入配置</h3>
          <a-form-item label="应用分类">
            <a-select
              v-decorator="[
                'category',
                { rules: [{ required: true, message: '请选择应用分类' }] }
              ]"
              placeholder="请选择应用分类"
            >
              <a-select-option value="office">办公效率</a-select-option>
              <a-select-option value="design">创意设计</a-select-option>
              <a-select-option value="development">技术开发</a-select-option>
            </a-select>
          </a-form-item>

          <!-- 应用名称 -->
          <a-form-item label="应用名称">
            <a-input
              v-decorator="[
                'appName',
                { rules: [{ required: true, message: '请输入应用名称' }] }
              ]"
              placeholder="请输入应用名称"
            />
          </a-form-item>

          <!-- 多行文本框们 -->
          <a-form-item label="预设指令">
            <a-textarea
              v-decorator="['instruction']"
              :rows="3"
              :autoSize="{ minRows: 3, maxRows: 6 }"
              placeholder="请输入预设指令"
            />
          </a-form-item>

          <a-form-item label="应用描述">
            <a-textarea
              v-decorator="['description']"
              :rows="3"
              :autoSize="{ minRows: 3, maxRows: 6 }"
              placeholder="请输入应用描述"
            />
          </a-form-item>

          <a-form-item label="示例内容">
            <a-textarea
              v-decorator="['example']"
              :rows="3"
              :autoSize="{ minRows: 3, maxRows: 6 }"
              placeholder="请输入示例内容"
            />
          </a-form-item>

          <!-- 应用Logo上传 -->
          <a-form-item label="应用Logo">
            <a-upload
              v-decorator="['logo']"
              listType="picture-card"
              :showUploadList="false"
              :beforeUpload="beforeLogoUpload"
            >
              <img v-if="logoUrl" :src="logoUrl" alt="logo" class="logo-preview" />
              <div v-else>
                <a-icon :type="logoLoading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">上传Logo</div>
              </div>
            </a-upload>
          </a-form-item>

          <!-- 共享开关 -->
          <a-form-item label="是否共享">
            <a-tooltip placement="top">
              <template slot="title">
                <div style="max-width: 300px">
                  <p>Tips: 请知悉</p>
                  <p>1. 选择共享提交之后审核状态将无法编辑应用</p>
                  <p>2. 审核通过的应用将会在应用广场公开展示</p>
                  <p>3. 管理审核通过后将会赠送一定的站内额度奖励用户</p>
                  <p>4. 一旦提交处于审核中、您将不能再编辑此应用</p>
                </div>
              </template>
              <a-switch
                v-decorator="['isPublic']"
                checkedChildren="共享"
                unCheckedChildren="私有"
              />
            </a-tooltip>
          </a-form-item>

          <!-- 提交按钮 -->
          <div class="form-actions">
            <a-button type="primary" @click="handleWorkflowSubmit">创建我的个人应用</a-button>
          </div>
        </a-form>
      </div>
      </transition>

      <!-- 帮助弹窗 -->
      <a-modal
        :visible="helpVisible"
        :title="helpContents[currentHelp]?.title"
        @cancel="helpVisible = false"
        @ok="helpVisible = false"
        width="600px"
      >
        <pre class="help-content">{{ helpContents[currentHelp]?.content }}</pre>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { Form, Button, Input, Select, Upload, Icon, message, Modal } from 'ant-design-vue'

export default {
  name: 'Workbench',
  components: {
    'a-form': Form,
    'a-form-item': Form.Item,
    'a-button': Button,
    'a-input': Input,
    'a-input-password': Input.Password,
    'a-select': Select,
    'a-select-option': Select.Option,
    'a-upload': Upload,
    'a-icon': Icon,
    'a-modal': Modal
  },
  data() {
    return {
      activeTab: 'agent',
      form: this.$form.createForm(this),
      helpVisible: false,
      currentHelp: '',
      helpContents: {
        agentId: {
          title: '如何获取智能体ID',
          content: '1. 登录开发者平台\n2. 进入「我的智能体」页面\n3. 选择对应智能体获取唯一ID'
        },
        token: {
          title: '如何获取访问令牌',
          content: '1. 进入个人设置 → 开发者设置\n2. 创建新的访问令牌\n3. 复制令牌内容到此输入框'
        },
        oauth: {
          title: 'OAuth应用配置指南',
          content: '1. 在开发者平台创建OAuth应用\n2. 获取应用ID和公钥\n3. 下载私钥文件并妥善保管'
        }
      },
      showWorkflowForm: false,
      logoUrl: '',
      logoLoading: false,
      workflowForm: this.$form.createForm(this)
    }
  },
  methods: {
    showCreateForm() {
      this.activeTab = 'agent'
    },
    handleWorkflow() {
      this.activeTab = 'workflow'
    },
    handleAuthTypeChange(value) {
      // 清除之前的表单数据
      if (value === 'token') {
        this.form.setFieldsValue({
          appId: undefined,
          publicKey: undefined,
          privateKey: undefined
        })
      } else {
        this.form.setFieldsValue({
          accessToken: undefined
        })
      }
    },
    beforeUpload(file) {
      const isValidSize = file.size / 1024 / 1024 < 2
      if (!isValidSize) {
        message.error('文件大小不能超过2MB!')
      }
      return isValidSize
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('表单数据:', values)
          // 这里处理表单提交逻辑
          message.success('创建成功!')
          this.activeTab = 'agent'
          this.showWorkflowForm = false
          this.form.resetFields()
        }
      })
    },
    showHelp(type) {
      this.currentHelp = type
      this.helpVisible = true
    },
    beforeLogoUpload(file) {
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        message.error('只能上传图片文件!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        message.error('图片大小不能超过2MB!')
      }
      return isImage && isLt2M
    },
    handleWorkflowSubmit() {
      this.workflowForm.validateFields((err, values) => {
        if (!err) {
          console.log('工作流表单数据:', values)
          message.success('应用创建请求已提交!')
          this.activeTab = 'workflow'
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.workbench {
  padding: 24px;

  .tab-container {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;

    .tab-item {
      padding: 8px 16px;
      cursor: pointer;
      border-radius: 6px 6px 0 0;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;
      position: relative;
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      margin-bottom: -1px;

      &.active {
        background: #fff;
        color: #2f54eb;
        border-bottom-color: #fff;
        z-index: 1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        &::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          right: 0;
          height: 2px;
          background: #2f54eb;
        }
      }
      &:hover:not(.active) {
        background: #f1f3f5;
        color: #1d39c4;
      }
    }
  }

  .create-form {
    max-width: 500px;
    padding: 24px;
    background: #fff;
    border-radius: 0 8px 8px 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

    .form-title {
      margin-bottom: 24px;
      font-size: 18px;
      color: #1d1d1d;
      font-weight: 600;
      position: relative;
      padding-left: 12px;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: #2f54eb;
        border-radius: 2px;
      }
    }

    .ant-form-item {
      margin-bottom: 24px;

      &-label {
        font-weight: 600;
        color: #434343;
        font-size: 14px;
      }
    }

    .ant-input,
    .ant-select-selection,
    .ant-input-password {
      border-radius: 4px;
      height: 36px;
      transition: all 0.2s;

      &:hover, &:focus {
        border-color: #2f54eb;
        box-shadow: 0 0 0 2px rgba(47, 84, 235, 0.1);
      }
    }

    .form-actions {
      margin-top: 32px;
      display: flex;
      justify-content: flex-end;

      .ant-btn {
        height: 36px;
        padding: 0 24px;
        border-radius: 4px;
        background: #2f54eb;
        border-color: #2f54eb;
        transition: all 0.3s;

        &:hover {
          background: #1d39c4;
          border-color: #1d39c4;
          transform: translateY(-1px);
        }
      }
    }
  }

  .form-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .help-link {
      color: #1890ff;
      font-size: 12px;
      cursor: pointer;
      transition: opacity 0.3s;

      &:hover {
        opacity: 0.8;
      }

      .anticon {
        margin-right: 4px;
      }
    }
  }

  .help-content {
    white-space: pre-wrap;
    line-height: 1.8;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 4px;
    margin: 0;
  }

  .logo-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  // 新增动画效果
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
}

// 移动端适配优化
@media screen and (max-width: 768px) {
  .workbench {
    .tab-container {
      gap: 8px;
      flex-wrap: wrap;

      .tab-item {
        flex: 1;
        justify-content: center;
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
        
        &::after {
          display: none;
        }
      }
    }

    .create-form {
      border-radius: 8px;
      padding: 16px;
      
      .form-title {
        font-size: 16px;
        margin-bottom: 20px;
      }
    }
  }
}
</style> 